<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script>
    function previewImage() {
        var fileReader = new FileReader();
        fileReader.readAsDataURL(document.changeAvatar.file.files[0]);
        fileReader.onload = function(oFREvent) {
            document.getElementById("image").src = oFREvent.target.result;
        };
    };
</script>
<div class="contents">
    <h2>Change Avatar</h2>
    <div class="avatar">
        <form name="changeAvatar" action="/JudiBlog/updateprofile" method="Post" enctype="multipart/form-data">
            <table>
                <tr>
                    <c:if test="${currentUser.getPathImage() != null}">
                        <td><img id="image" name="image" alt="Avatar" height="214" width="144" src="${currentUser.getPathImage()}"/></td>
                    </c:if>
                    <c:if test="${currentUser.getPathImage() == null}">
                        <td><img id="image" name="image" alt="Avatar" height="214" width="144" src="/JudiBlog/img/avatar/default.jpg"/></td>
                    </c:if>
                </tr>
                <tr>
                    <td><input type="file" name="file" class="fileIMG"  accept="image/*" onchange="previewImage();"/></td>
                </tr>
                <tr>
                    <td style="text-align: center"><input type="submit" value="Change Avt" name="action" class="input_submit"/></td>
                </tr>
            </table>
        </form>
    </div>
</div>